<template>
  <!-- 复合时间输入 -->
  <div class="time_inputs">
    <div class="unit">
      <el-input-number
        class="input"
        v-model="hours"
        :min="0"
        :max="23"
        placeholder="时"
        controls-position="right"
      />
      <span class="label">时</span>
    </div>
    <div class="unit">
      <el-input-number
        class="input"
        v-model="minutes"
        :min="0"
        :max="59"
        placeholder="分"
        controls-position="right"
      />
      <span class="label">分</span>
    </div>
    <div class="unit">
      <el-input-number
        class="input"
        v-model="seconds"
        :min="0"
        :max="59"
        placeholder="秒"
        controls-position="right"
      />
      <span class="label">秒</span>
    </div>
    <div class="unit">
      <el-input-number
        class="input"
        v-model="milliseconds"
        :min="0"
        :max="999"
        placeholder="毫秒"
        controls-position="right"
      />
      <span class="label">毫秒</span>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 100,
  },
  min: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: -1,
  },
})

const emit = defineEmits(['update:modelValue', 'update'])

// 时间单位输入
const hours = ref(0)
const minutes = ref(0)
const seconds = ref(0)
const milliseconds = ref(0)

// 计算总毫秒数
const totalMs = computed(() => {
  return hours.value * 3600000 + minutes.value * 60000 + seconds.value * 1000 + milliseconds.value
})

// 处理边界值调整
const adjustTime = (ms) => {
  let adjusted = ms
  // 应用最小值限制
  if (adjusted < props.min) adjusted = props.min
  // 应用最大值限制（仅当max >= 0时）
  if (props.max >= 0 && adjusted > props.max) adjusted = props.max
  return adjusted
}

// 同步到父组件并处理边界
watch(totalMs, (newVal) => {
  const adjusted = adjustTime(newVal)

  if (adjusted !== newVal) {
    // 需要调整并更新本地值
    const units = parseMsToUnits(adjusted)
    hours.value = units.hours
    minutes.value = units.minutes
    seconds.value = units.seconds
    milliseconds.value = units.milliseconds
  }
  // 始终发出调整后的值
  emit('update:modelValue', adjusted)
  emit('update')
})

// 解析毫秒到时间单位
const parseMsToUnits = (ms) => {
  return {
    hours: Math.floor(ms / 3600000),
    minutes: Math.floor((ms % 3600000) / 60000),
    seconds: Math.floor((ms % 60000) / 1000),
    milliseconds: ms % 1000,
  }
}

// 监听外部值变化
watch(
  () => props.modelValue,
  (newMs) => {
    const adjusted = adjustTime(newMs)
    if (adjusted !== newMs) {
      emit('update:modelValue', adjusted)
      emit('update')
      return
    }
    const units = parseMsToUnits(adjusted)
    hours.value = units.hours
    minutes.value = units.minutes
    seconds.value = units.seconds
    milliseconds.value = units.milliseconds
  },
  {
    immediate: true,
  },
)

// 监听min/max变化
watch([() => props.min, () => props.max], () => {
  const adjusted = adjustTime(totalMs.value)
  if (adjusted !== totalMs.value) {
    const units = parseMsToUnits(adjusted)
    hours.value = units.hours
    minutes.value = units.minutes
    seconds.value = units.seconds
    milliseconds.value = units.milliseconds
    emit('update:modelValue', adjusted)
    emit('update')
  }
})
</script>
<style lang="less" scoped>
@import url('../assets/main.less');

.time_inputs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;

  .unit {
    position: relative;
    display: flex;
    align-items: center;

    .input {
      width: 100px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
      }
    }

    .label {
      margin-left: 8px;
      color: var(--el-text-color-regular);
      font-size: 0.9em;
    }

    &::after {
      content: ':';
      position: absolute;
      right: -4px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--el-text-color-placeholder);
    }

    &:last-child::after {
      display: none;
    }
  }
}
</style>
